import {View} from '@tarojs/components';
import Icon, {icons} from 'components/Icon'
import Taro from '@tarojs/taro';
import s from './index.module.scss'

interface ListRowProps {
  title: string,
  onClick?: () => any,
  description?: string,
  style?: any,
  underLine?: boolean
  path?: string
}

function randomNumber() {
  return Math.floor(Math.random() * icons.length)
}

function ListRow(props: ListRowProps) {
  const {title, onClick, description = '', style, underLine} = props

  function clickhandler() {
    if (props.path) {
      Taro.navigateTo({ url: props.path })
    }
    onClick && onClick()
  }

  const _style = {...style, ... underLine ? {
      borderBottom: '1px solid rgba(0, 0, 0, 0.03)'
    } : {}}

  return (
    <View onClick={clickhandler} className={s.list_row} style={_style}>
      <View className={s.before}>
        <Icon className={s.icon} name={icons[randomNumber()]} size={22} />
        <View className={s.title}>{title}</View>
      </View>
      
      <View className={s.after}>
        <View className={s.desc}>{description}</View>
        <Icon className={s.arrow} name='chevron-up' size={26} />
      </View>
    </View>
  )
}

export default ListRow
